<template>
  <div class="workplace-container">
    <div class="board">
      <div class="board-left">
        <div class="board-title"><span>工作台</span></div>
        <div class="board-info">
          <img class="logo" :src="avatar" />
          <div class="content">
            <span class="content-name">极客恰恰</span>
            <span class="content-title">高级前端开发工程师</span>
          </div>
        </div>
      </div>
      <div class="board-right">
        <div class="border-item">
          <div class="statistic">
            <span class="statistic-title">项目数</span>
            <span class="statistic-content">13</span>
          </div>
        </div>
        <div class="border-item">
          <div class="statistic">
            <span class="statistic-title">项目访问</span>
            <span class="statistic-content">336</span>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="15" class="progress-card">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>所有项目</span>
              <el-button class="button" type="text">添加更多</el-button>
            </div>
          </template>
          <div class="card-container">
            <el-card v-for="card in cardInfo" :key="card.id" shadow="hover" class="card">
              <div class="card-title">
                <img :src="card.imgSrc" class="title-logo" />
                <span class="title-name" @click="handleLinkClick(card.link)">{{ card.cardTitle }}</span>
              </div>
              <div class="card-content">
                <span>
                  {{ card.cardContent }}
                </span>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" class="radar-card">
        <el-card class="box-card">
          <div ref="radarEchart" style="width: 100%; height: 391px" class="echart"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row> -->
    <el-row>
      <el-col :gutter="20">
        <div class="grid-content bg-purple-dark">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>仪表信息</span>
                <div></div>
              </div>
            </template>

            <div class="progress-container">
              <div class="progress">
                <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
                <div><span>需求</span></div>
              </div>
              <div class="progress">
                <el-progress type="dashboard" :percentage="devPercentage" :color="colors"></el-progress>
                <div><span>开发</span></div>
              </div>
              <div class="progress">
                <el-progress type="dashboard" :percentage="testPercentage" :color="colors"></el-progress>
                <div><span>测试</span></div>
              </div>
              <div class="progress">
                <el-progress type="dashboard" :percentage="proPercentage" :color="colors"></el-progress>
                <div><span>产品</span></div>
              </div>
            </div>
            <div class="echart-container">
              <!-- <div id="container" style="width: 600px;height:400px;"></div>
               <div id="container2" style="width: 600px;height:400px;"></div> -->
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import * as Echarts from 'echarts'
import avatar from '@/assets/avatar-default.jpg'

export default defineComponent({
  name: 'Workplace',
  setup() {
    const radarEchart = ref()
    const radarOptions = {
      title: {
        text: ''
      },
      legend: {
        data: ['上个月', '本月']
      },
      radar: {
        shape: 'circle',
        indicator: [
          { name: '粉丝', max: 6500 },
          { name: '互动', max: 16000 },
          { name: '浏览', max: 30000 },
          { name: '消息', max: 38000 }
        ]
      },
      series: [
        {
          name: '互动信息',
          type: 'radar',
          data: [
            {
              value: [4200, 3000, 20000, 35000],
              name: '上个月'
            },
            {
              value: [5000, 14000, 28000, 26000],
              name: '本月'
            }
          ]
        }
      ]
    }
    onMounted(() => {
      const radarChart = Echarts.init(radarEchart.value)
      // 使用刚指定的配置项和数据显示图表。
      radarChart.setOption(radarOptions as any)
    })
    const cardInfo = reactive([
      {
        id: 1,
        imgSrc:
          '',
        cardTitle: 'elementPlus',
        link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
        cardContent: ' 一个很优秀的vue UI组件库，致力于让开发更加简单，方便。'
      },
      {
        id: 2,
        imgSrc:
          '',
        cardTitle: 'elementPlus',
        link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
        cardContent: ' 一个很优秀的vue UI组件库，致力于让开发更加简单，方便。'
      },
      {
        id: 3,
        imgSrc:
          '',
        cardTitle: 'elementPlus',
        link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
        cardContent: ' 一个很优秀的vue UI组件库，致力于让开发更加简单，方便。'
      },
      {
        id: 4,
        imgSrc:
          '',
        cardTitle: 'elementPlus',
        link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
        cardContent: ' 一个很优秀的vue UI组件库，致力于让开发更加简单，方便。'
      },
      {
        id: 5,
        imgSrc:
          '',
        cardTitle: 'elementPlus',
        link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
        cardContent: ' 一个很优秀的vue UI组件库，致力于让开发更加简单，方便。'
      },
      {
        id: 6,
        imgSrc:
          '',
        cardTitle: 'elementPlus',
        link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
        cardContent: ' 一个很优秀的vue UI组件库，致力于让开发更加简单，方便。'
      }
    ])
    const percentage = ref(20)
    const devPercentage = ref(40)
    const testPercentage = ref(60)
    const proPercentage = ref(80)

    const colorArr = [
      { color: '#f56c6c', percentage: 20 },
      { color: '#e6a23c', percentage: 40 },
      { color: '#5cb87a', percentage: 60 },
      { color: '#1989fa', percentage: 80 },
      { color: '#6f7ad3', percentage: 100 }
    ]
    const colors = ref(colorArr)

    // methods
    const increase = () => {
      percentage.value += 10
      if (percentage.value > 100) {
        percentage.value = 100
      }
    }
    const decrease = () => {
      percentage.value -= 10
      if (percentage.value < 0) {
        percentage.value = 0
      }
    }
    const handleLinkClick = (targetLink: string | undefined) => {
      window.open(targetLink, '_blank')
    }

    return {
      handleLinkClick,
      radarEchart,
      avatar,
      cardInfo,
      percentage,
      devPercentage,
      testPercentage,
      proPercentage,
      colors,
      increase,
      decrease
    }
  }
})
</script>
<style lang="stylus" scoped>
.workplace-container{
    color black
    padding 0px 20px
    background-color #fafbfe
 .board{
    width:100%;
    height:130px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    .board-left{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        width:100%;
        .board-title{
            span{
                  margin-right: 12px;
              margin-bottom: 0;
              color: rgba(0,0,0,.85);
              font-weight: 600;
              font-size: 20px;
              line-height: 32px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
        }
        .board-info{
           display:flex;
          flex-direction:row;
          justify-content:flex-start;
          align-items:center;
          width:100%;
          margin-top:12px;
        .logo{
          width:74px;
          height:74px;
          border-radius:50%;
        }
        .content{
          width:100%;
            display:flex;
            flex-direction:column;
            justify-content:flex-start;
            align-items:flex-start;
             position: relative;
            top: 4px;
            flex: 1 1 auto;
            margin-left: 24px;
            color: rgba(0,0,0,.45);
            line-height: 22px;
          .content-name{
            margin-bottom: 12px;
            color: rgba(0,0,0,.85);
            font-weight: 500;
            font-size: 20px;
            line-height: 28px;
          }
          .content-title{
            font-size: 14px;
          }
        }

        }
      }
      .board-right{
        display:flex;
        flex-direction:row;
        justify-content :flex-start;
        align-items :center;
        width:auto;
        .border-item{
            width:auto;
            padding: 0 16px;
            position:relative;
              :after{
                 position: absolute;
                top: 8px;
                right: 0;
                width: 1px;
                height: 40px;
                background-color: #f0f0f0;
                content: "";
            }

            .statistic{
              box-sizing: border-box;
              margin: 0;
              padding: 0;
              color: rgba(0,0,0,.85);
              font-size: 14px;
              line-height: 1.5715;

              .statistic-title{
                  margin-bottom: 4px;
                  color: rgba(0,0,0,.45);
                  font-size: 14px;
              }
              .statistic-content{
                  color: rgba(0,0,0,.85);
                  font-size: 24px;
              }
        }
        }


      }

    }
    .radar-card{
          margin:24px 0px 24px 0px;
    }
    .progress-card{

        width:100%;
        margin:24px 0px 24px 0px;
        .box-card{
           .card-container{
                width:100%;
                display :flex;
              flex-direction :row;
              justify-content :space-around;
              align-items :center;
                flex-wrap:wrap
           }


        }
      .card{
        width:33%;
        min-width: 194px;
        display :flex;
        flex-direction :column;
        justify-content :center;
        align-items :flex-start;
        .card-title{
            display :flex;
            flex-direction :row;
            justify-content :flex-start;
            align-items :center;
          img{
            width:50px;
            height:50px;
          }
          .title-name{
            display: inline-block;
            height: 24px;
            margin-left: 12px;
            color: rgba(0,0,0,.85);
            font-size: 14px;
            line-height: 24px;
            vertical-align: top;
            cursor:pointer;
          }
        }
      .card-content{
        height: auto;
        overflow: hidden;
        text-overflow :ellipsis;
        color: rgba(0,0,0,.45);
        line-height: 22px;
      }
      }
    }
    .info{
        text-align: left;
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 12px;
    }
     .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .progress-container{
      display:flex;
      flex-direction :row;
      justify-content space-around;
      align-items center;

        .progress{
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items center;
  }
  }

}
</style>
